<template>
  <div class="layui-row">
      <!-- 头部导航块 -->
      <top-lump>
        <div class="layui-btn-group">
          <router-link to="/queryInterface">
            <button class="layui-btn">
              <i class="layui-icon">&#xe65c;</i>
            </button>
          </router-link>
        </div>
          <span class="layui-breadcrumb kgo-top-lump-breadcrumb" lay-separator="#">
                <a># 更新接口</a>
                <a>请求参数</a>
                <a>返回参数</a>
                <a>返回示例</a>
         </span>
      </top-lump>
      <!--    接口信息体展示   -->
      <info-lump>
        <base-card title="更新接口">
            <table class="layui-table">
                <colgroup>
                    <col>
                    <col width="40%">
                    <col>
                    <col width="40%">
                </colgroup>
                <tbody>
                    <tr>
                        <td>接口名称</td>
                        <td class="kgo-input-td"><input v-model="thisInterface.name" name="name" type="text" class="kgo-input-text"/></td>
                        <td>所属模块</td>
                        <td class="kgo-input-td"><alone-select :selected="thisInterface.moduleId" name="moduleId" url="/module/code" v-model="setSelect"></alone-select></td>
                    </tr>
                    <tr>
                        <td>URL</td>
                        <td class="kgo-input-td" colspan="3"><input v-model="thisInterface.url" name="url" type="text" class="kgo-input-text"/></td>
                    </tr>
                    <tr>
                        <td>接口状态</td>
                        <td class="kgo-input-td"><alone-select :selected="thisInterface.status" name="status" catalogueCode="interface_status" v-model="setSelect"></alone-select></td>
                        <td>返回值类型</td>
                        <td class="kgo-input-td"><alone-select :selected="thisInterface.responseType" name="responseType" catalogueCode="interface_type" v-model="setSelect"></alone-select></td>
                    </tr>
                    <tr>
                        <td>请求方式</td>
                        <td class="kgo-input-td"><alone-select :selected="thisInterface.methodType" name="methodType" catalogueCode="request_type" v-model="setSelect"></alone-select></td>
                        <td>接口实现类</td>
                        <td class="kgo-input-td"><input v-model="thisInterface.realizeClass" name="realizeClass" type="text" class="kgo-input-text"/></td>
                    </tr>
                    <tr>
                        <td>版本号</td>
                        <td class="kgo-input-td"><input v-model="thisInterface.version" name="version" type="text" class="kgo-input-text"/></td>
                        <td>根路径</td>
                        <td class="kgo-input-td"><input  v-model="thisInterface.rootUrl" name="rootUrl" type="text" class="kgo-input-text"/></td>
                    </tr>
                    <tr>
                        <td>变更内容说明</td>
                        <td class="kgo-input-td"  colspan="3"><alone-textarea :setValue="thisInterface.updateRemark" name="updateRemark" ref="updateRemark" /></td>
                    </tr>
                     <tr>
                        <td>接口描述</td>
                        <td class="kgo-input-td"  colspan="3"><alone-textarea :setValue="thisInterface.remark" name="remark" v-on:textarea="getTextareaRemark" ref="remark" /></td>
                    </tr>
                     <tr>
                        <td>项目排序</td>
                        <td class="kgo-input-td"><input v-model="thisInterface.index"  name="index" type="text" class="kgo-input-text"/></td>
                        <td>操作</td>
                        <td class="kgo-button-td">
                            <div class="layui-btn-group">
                                <!-- <button class="layui-btn" v-on:click="addInterface">增加</button> -->
                                <button class="layui-btn" v-on:click="updateInterface">更新</button>

                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </base-card>
        <!--     新增请求参数     -->
        <base-card title="请求参数">
               <button v-on:click="addInterfaceParam" id="addInterfaceBtn" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe654;</i>
               </button>
              <table class="layui-table">
                <colgroup>
                    <col width="15%">
                    <col width="10%">
                    <col width="10%">
                    <col width="15%">
                    <col width="40%">
                    <col width="8%">
                </colgroup>
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>是否必选</th>
                        <th>参数类型</th>
                        <th>默认值</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="param in params">
                        <td class="kgo-input-td">{{param.name}}</td>
                        <td class="kgo-input-td">{{param.isMust}}</td>
                        <td class="kgo-input-td">{{param.type}}</td>
                        <td class="kgo-input-td">{{param.defaultValue}}</td>
                        <td class="kgo-input-td">{{param.remark}}</td>
                        <td class="kgo-input-td" style="text-align:center;">
                            <div class="layui-btn-group">
                                <button v-on:click="editInterfaceParam(param.id)" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe642;</i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

        </base-card>
        <!--   新增返回参数    -->
        <base-card title="返回参数">
             <button v-on:click="addInterfaceResponseParams" id="addResponseParams" class="layui-btn layui-btn-primary layui-btn-sm">
                  <i class="layui-icon">&#xe654;</i>
             </button>
            <table class="layui-table">
                <colgroup>
                    <col width="12%">
                    <col width="8%">
                    <col width="8%">
                    <col width="55%">
                    <col width="8%">
                </colgroup>
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>参数类型</th>
                        <th>默认值</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="responseParam in responseParams">
                        <td class="kgo-input-td">{{responseParam.name}}</td>
                        <td class="kgo-input-td">{{responseParam.type}}</td>
                        <td class="kgo-input-td">{{responseParam.defaultValue}}</td>
                        <td class="kgo-input-td">{{responseParam.remark}}</td>
                        <td class="kgo-input-td" style="text-align:center;">
                            <div class="layui-btn-group">
                                <button v-on:click="editInterfaceResponseParams(responseParam.id)" class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe642;</i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm">
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

        </base-card>
        <!--     返回示例      -->
        <base-card title="返回示例">
            <table class="layui-table">
                <colgroup>
                    <col width="10%">
                    <col width="85%">
                </colgroup>
                <tbody>
                    <tr>
                        <td class="kgo-add-example">
                            <span>成功返回示例</span>
                            <div>格式化示例</div>
                            <div v-on:click="addSuccessExample">添加示例</div>
                        </td>
                        <td class="kgo-input-td"><alone-textarea :setValue="thisInterface.successExample" height="200px"  ref="successExample" /></td>
                    </tr>
                    <tr>
                        <td class="kgo-add-example">
                          <span>错误返回示例</span>
                          <div>格式化示例</div>
                          <div v-on:click="addFailExample">添加示例</div>
                        </td>
                        <td class="kgo-input-td"><alone-textarea :setValue="thisInterface.failExample" height="200px" ref="failExample" /></td>
                    </tr>
                </tbody>
            </table>
        </base-card>

      </info-lump>
  </div>
</template>

<script>

import Edit from 'wangeditor'
export default {
    data () {
        return {
            interfaceId:null,
            name:null,
            moduleId:null,
            url:null,
            methodType:null,
            projectId:null,
            version:null,
            responseType:null,
            realizeClass:null,
            rootUrl:null,
            status:'',
            type:'',
            index:null,
            params:[],
            responseParams:[],
            errorList:null,
            remark:'',
            successExample:null,
            failExample:null,
            thisInterface:{},
            Url:this.$store.state.RootURL


        }
    },
    created(){
      this.initInterfaceInfo();
    },
   mounted(){


   },
   methods:{
        initInterfaceInfo:function(){
            var url = this.$store.state.RootURL + "/interface/id";
            var that = this;
            var interfaceId = this.$route.params.id;
            this.interfaceId = interfaceId;

            $.ajax({
                url: url,
                type:"get",
                async: false,
                dataType:'json',
                data:{id:interfaceId},
                success: function(data){
                     console.log(JSON.stringify(data));
                 if(KgoUtil.objIsNull(data.data)){
                     layer.msg("为获取到该接口信息");
                     return;
                 }
                  that.thisInterface = data.data;


                  that.params = JSON.parse(KgoUtil.objIsNotNull(data.data.params) ? data.data.params : "[]");
                  that.responseParams = JSON.parse(KgoUtil.objIsNotNull(data.data.responseParams)  ? data.data.responseParams : "[]");
                }
            });

        },
        /**
         * 获取文本框的值
         */
        getTextareaRemark:function(value){

           this.remark = value;
        },
         getTextarea:function(value){

           this.remark = value;
        },
        /**
         * 更新接口
         */
        updateInterface:function(){

            if(this.thisInterface.name==null){
              layer.msg("接口名称不能为空！");
              return ;
            }
           if(this.thisInterface.methodType==null){
              layer.msg("接口请求类型不能为空");
              return ;
            }
            if(this.thisInterface.moduleId==null){
              layer.msg("模块不能为空");
              return ;
            }

            //触发获取文本域的方法
            this.thisInterface.remark = this.$refs.remark.getTextarea();
            //获取更新内容说明
            this.thisInterface.updateRemark = this.$refs.updateRemark.getTextarea();
            this.thisInterface.id = this.interfaceId;
            var interface_obj = this.thisInterface;
            interface_obj.params = JSON.stringify(this.params);
            interface_obj.responseParams = JSON.stringify(this.responseParams);

            var that = this;
            var url = this.$store.state.RootURL + "/update/interface";
            $.post(url,interface_obj,function(result){
                layer.msg(result.msg);

            },"json");

        },
         /**==============================================================================================
         *    编辑接口参数
         * ==============================================================================================
         */
        editInterfaceParam:function(val){

          //当前编辑的参数序号
          var thisParamsIndex = 0;
          var that = this;
          var _thisParam = null;
          for(var i=0;i <this.params.length;i++){
            if(this.params[i].id==val){
              //console.log(" 接口参数： "+JSON.stringify(this.params[i]));
              _thisParam = this.params[i];
              break;
            }
          }
          //------------------------------------------
          if(_thisParam!=null){
            $.ajax({
                url: "./static/layerPage/addInterfaceParam.html",
                type:"GET",
                async: true,
                dataType:'html',
                success: function(data){
                  KgoUtil.setState("editThisParam",_thisParam);
                  layer.open({
                    title: '新增接口参数',
                     area: ['1600px', '220px'],
                     offset: 'r',
                     btn:null,
                     content: data,
                     end:function(){
                       if(KgoUtil.getState("InterfaceParam")!=null){
                          for(var i=0;i <that.params.length;i++){
                            if(that.params[i].id==KgoUtil.getState("InterfaceParam").id){
                              that.params[i] = KgoUtil.getState("InterfaceParam");
                              //使用临时变量承接一下，然后再复制回去，才能使vue重新计算dom
                              var tempParams = that.params;
                              that.params = [];
                              that.params = tempParams;
                              break;
                            }
                          }
                          //将参数全局重置为空
                          KgoUtil.setState("InterfaceParam",null);
                          that.updateInterfaceParam();
                       }else{
                         layer.msg("未填写请求参数！");
                       }

                     }
                });
                }
            });
          }
          //-------------------------------------------


        },
        /**
         * 更新接口参数
         */
        updateInterfaceParam:function(){
          if(this.interfaceId==null){
            layer.msg("接口Id为空，请先新增接口！");
            return;
          }else{
            var updateUrl = this.$store.state.RootURL + "/update/interface";
            var interface_obj = {
               "id":this.interfaceId,
               "params":JSON.stringify(this.params)
            };
            $.post(updateUrl,interface_obj,function(result){
                layer.msg(result.msg);
                if(result.success){

                }
            },"json");

          }

          console.log(  );
        },

        /**
         * 新增接口参数页面
         */
        addInterfaceParam:function(){
            var $ = layui.$;
            var that = this;
            $.ajax({
                url: "./static/layerPage/addInterfaceParam.html",
                type:"GET",
                async: true,
                dataType:'html',
                success: function(data){
                  KgoUtil.setState("ddd","测试");
                  layer.open({
                    title: '新增接口参数',
                     area: ['1600px', '220px'],
                     offset: 'r',
                     btn:null,
                     content: data,
                     end:function(){
                       console.log(JSON.stringify(KgoUtil.getState("InterfaceParam") ) ) ;
                       that.params.push(KgoUtil.getState("InterfaceParam") );
                       that.updateInterfaceParam();
                     }
                });
                }
            });
        },
         /**=================================================================================================================
         *         编辑返回响应参数
         * =================================================================================================================
         */
        editInterfaceResponseParams:function(val){

          //当前编辑的参数序号
          var thisParamsIndex = 0;
          var that = this;
          var _thisResponseParam = null;
          for(var i=0;i <this.responseParams.length;i++){
            if(this.responseParams[i].id==val){
              _thisResponseParam = this.responseParams[i];
              break;
            }
          }
          //------------------------------------------
          if(_thisResponseParam!=null){
            $.ajax({
                url: "./static/layerPage/addInterfaceResponseParams.html",
                type:"GET",
                async: true,
                dataType:'html',
                success: function(data){
                  KgoUtil.setState("editThisResponseParam",_thisResponseParam);
                  layer.open({
                    title: '编辑接口返回参数',
                     area: ['1600px', '220px'],
                     offset: 'r',
                     btn:null,
                     content: data,
                     end:function(){
                       if(KgoUtil.getState("InterfaceResponseParams")!=null){
                          for(var i=0;i <that.responseParams.length;i++){
                            if(that.responseParams[i].id==KgoUtil.getState("InterfaceResponseParams").id){
                              that.responseParams[i] = KgoUtil.getState("InterfaceResponseParams");
                              //使用临时变量承接一下，然后再复制回去，才能使vue重新计算dom
                              var tempResponseParams = that.responseParams;
                              that.responseParams = [];
                              that.responseParams = tempResponseParams;
                              break;
                            }
                          }
                          //将参数全局重置为空
                           KgoUtil.setState("InterfaceResponseParams",null);
                           that.updateInterfaceResponseParams();
                       }else{
                         layer.msg("未填写请求参数！");
                       }

                     }
                });
                }
            });
          }
          //-------------------------------------------

        },
        /**===============================================================================
         *  更新接口返回参数
         *
         * ===============================================================================
         */
         updateInterfaceResponseParams:function(){
          if(this.interfaceId==null){
            layer.msg("接口Id为空，请先新增接口！");
            return;
          }else{
            var updateUrl = this.$store.state.RootURL + "/update/interface";
            var interface_obj = {
               "id":this.interfaceId,
               "responseParams":JSON.stringify(this.responseParams)
            };
            $.post(updateUrl,interface_obj,function(result){
                layer.msg(result.msg);
                if(result.success){

                }
            },"json");

          }

        },
        /**-------------------------------------------------------------------------------------
         *   新增接口返回参数
         * -------------------------------------------------------------------------------------
         */
        addInterfaceResponseParams:function(){
            var $ = layui.$;
            var that = this;
            $.ajax({
                url: "./static/layerPage/addInterfaceResponseParams.html",
                type:"GET",
                async: true,
                dataType:'html',
                success: function(data){
                  // layer 打开
                  layer.open({
                    title: '新增接口返回参数',
                     area: ['1600px', '220px'],
                     offset: 'r',
                     btn:null,
                     content: data,
                     end:function(){
                       console.log("新增接口返回参数 "+JSON.stringify(KgoUtil.getState("InterfaceResponseParams") ) ) ;
                       that.responseParams.push(KgoUtil.getState("InterfaceResponseParams") );
                       that.updateInterfaceResponseParams();
                     }
                });
                }
            });
        },
        /**
         * 添加失败示例
         */
        addFailExample:function(){
            this.failExample = this.$refs.failExample.getTextarea();
            if(this.interfaceId==null){
              layer.msg("接口Id为空，请先新增接口！");
              return;
            }else if(this.failExample==null||this.failExample==""){
              layer.msg("失败示例不能为空！");
              return;
            }else{
              var updateUrl = this.$store.state.RootURL + "/update/interface";
              var interface_obj = {
                "id":this.interfaceId,
                "failExample":this.failExample
              };
              $.post(updateUrl,interface_obj,function(result){
                  layer.msg(result.msg);
              },"json");
            }
        },
        /**
         * 新增成功示例
         */
        addSuccessExample:function(){
            this.successExample = this.$refs.successExample.getTextarea();
            if(this.interfaceId==null){
              layer.msg("接口Id为空，请先新增接口！");
              return;
            }else if(this.successExample==null||this.successExample==""){
              layer.msg("成功示例不能为空！");
              return;
            }else{
              var updateUrl = this.$store.state.RootURL + "/update/interface";
              var interface_obj = {
                "id":this.interfaceId,
                "successExample":this.successExample
              };
              $.post(updateUrl,interface_obj,function(result){
                  layer.msg(result.msg);
              },"json");
            }
        }


   },
   computed: {
        setSelect(){
          var selected = this.$store.state.aloneSelect;{
              if(selected["status"]){
                    console.log("状态 ：" + selected["status"]);
                    this.thisInterface.status = selected["status"];
              }if(selected["methodType"]){
                    console.log("请求类型 ：" + selected["methodType"]);
                    this.thisInterface.methodType = selected["methodType"];
              }if(selected["responseType"]){
                    console.log("返回类型 ：" + selected["responseType"]);
                    this.thisInterface.responseType = selected["responseType"];
              }if(selected["moduleId"]){
                    console.log("模块 ：" + selected["moduleId"]);
                    this.thisInterface.moduleId = selected["moduleId"];
              }
          }
        }
    }
}
</script>

<style lang="scss">
.kgo-input-text{
    height: 35px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #e6e6e6;
}
#addInterfaceBtn{
  position: absolute;
  top: -38px;
  right: 30px;
}
#addResponseParams{
   position: absolute;
   top: -38px;
   right: 30px;
}
.kgo-add-example{
  text-align: center;
}
.kgo-add-example div{
  border: #e6e6e6 1px solid;
  width: 100px;
  border-radius: 5px;
  margin-left: 15px;
  display: inline-block;
  margin-top: 15px;
  padding: 5px;
  color: #FFFFFF;
  background-color: #009688;
}
</style>
